<template>
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="3">
                    <div>公司logo</div>
                </el-col>
                <el-col :span="18">
                    <h2>电商后台管理平台</h2>
                </el-col>
                <el-col :span="3">
                    <el-button type="info" @click="loginOut">退出</el-button>
                </el-col>
            </el-row>

        </el-header>
        <el-container>
            <!-- 左侧栏 -->
            <el-aside :width="isCollapse ? '64px' : '200px'">
                <div @click="isCollapse = !isCollapse" class="toggleShow">|||</div>
                <el-menu :collapse-transition="false" :collapse="isCollapse" router unique-opened
                    active-text-color="#ffd04b" background-color="#333744" class="el-menu-vertical-demo" default-active="2"
                    text-color="#fff">
                    <el-sub-menu v-for="(item, index) in menuList" :key="item.id" :index="'' + item.id">
                        <template #title>
                            <el-icon>
                                <SvgIcon :name="iconsObj[index]"></SvgIcon>
                            </el-icon>
                            <span>{{ item.authName }}</span>
                        </template>
                        <el-menu-item v-for="item2 in item.children" :key="item2.id" :index="'/' + item2.path">
                            <el-icon>
                                <SvgIcon name="setting"></SvgIcon>
                            </el-icon>
                            <span @click="test(item.authName, item2.authName)">{{ item2.authName }}</span>
                        </el-menu-item>
                    </el-sub-menu>

                </el-menu>
            </el-aside>
            <!-- 主体 -->
            <el-main>
                <MBX :menu1="menu1" :menu2="menu2"></MBX>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getMenuApi } from '@/http/api'
import { useRouter } from 'vue-router'

const router = useRouter();

//控制折叠展开
const isCollapse = ref(false)

const menu1 = ref('用户管理')
const menu2 = ref('')
const test = (m1: string, m2: string) => {
    menu1.value = m1;
    menu2.value = m2;
}


//用类型别名的方式定义索引签名
type iconType = {
    [index: number]: string
}

const iconsObj: iconType = {
    0: 'home',
    1: 'users',
    2: 'rights',
    3: 'goods',
    4: 'report'
}

onMounted(() => {
    //调用左侧菜单方法
    getMenuList()
})

interface MenuItem {
    "id": string,
    "authName": string,
    "path": string,
    "children": MenuItem[],
    "order": number
}

//定义菜单数组
const menuList = ref<MenuItem[]>([])

//获取左侧菜单方法
const getMenuList = async () => {
    const res = await getMenuApi()
    console.log('菜单res', res)
    menuList.value = res.data;

}

//退出
const loginOut = () => {
    //清除token
    localStorage.removeItem('token')
    //重定向到登录页
    router.push('/login')
}

</script>

<style scoped lang="scss">
.el-header {
    background: #373d41
}

.el-container {
    height: 100%;
}

.el-aside {
    background: #333744;

}

.el-header {
    color: #fff;
}

.el-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

.toggleShow {
    color: #fff;
    text-align: center;
    padding: 6px 0;
    background: #48494f;
    cursor: pointer;
}
</style>